/**
* 弹窗组件，使用： this.$store.dispatch('setModal', {visible: true, modalId: 'groupSetNameModal',groupId:'',callback:function(response){}});
*/
<template>
  <transition name="slide-fade">
    <div v-if="modal.visible && modal.modalId=='groupSetNameModal'" class="modal" id="groupSetNameModal" tabindex="-1"
         @click.stop.prevent="modalHide">
      <div class="modal-dialog" :class="{'warn-type':warnText!=''}" @click.stop.prevent>
        <div class="modal-content">
          <img src="~assets/images/tankuang-m@2x.png" class="img-responsive">
          <img src="~assets/images/close@2x.png" data-dismiss="modal" class="img-close" @click.stop.prevent="modalHide">

          <div class="title">修改组合名称</div>
          <div class="wrapper">
            <div class="form-group">
              <input type="text" class="form-control input-lg" v-model="groupName" id="groupName" name="groupName"
                     placeholder="请输入新的名称" value="">
              <input type="hidden" class="form-control" id="groupId" name="groupId" value="">
              <i class="iconfont icon-warn"></i>
              <span class="help-block" v-show="warnText==''||groupName==''">注：组合名不要超过10个字符哦</span>
              <span class="warn-block" v-show="warnText!=''">{{warnText}}</span>
            </div>
            <button type="button" class="btn btn-confirm btn-lg" @click="changeGroupName">确认修改</button>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
  import BaseModal from 'components/modal/BaseModal'
  import RemoteDAO from 'common/remoteDAO'
  import LocalDAO from 'common/localDAO'
  import _ from 'underscore'

  export default {
    data () {
      return {
        warnText: '',
        groupName: '',
        flag: true
      }
    },
    extends: BaseModal,
    watch: {
      groupName: function () {
        var self = this
        if (self.modal.modalId == 'groupSetNameModal') {
          // var reg = /^[\u4E00-\u9FA5]+$/; //验证组合名是否全是中文
          var reg = /^[A-Za-z0-9\u4e00-\u9fa5]+$/; //验证组合名是否是中文、字母或数字
          if (!reg.test(self.groupName) && self.groupName != '') {
            self.warnText = '组合名只能含中文、字母或数字';
            return false;
          }

          if (self.groupName.length > 10) {
            self.warnText = '名称请勿超过10个汉字';
            return false;
          }
          self.warnText = ''
        }
      }
    },
    methods: {
      changeGroupName(){
        var self = this;
        if (self.flag) {
          self.flag = false;
          var groupId = self.modal.groupId;
          var groupName = self.groupName;
          var userCode = LocalDAO.getUserCode();
          if (groupName.length == 0) {
            self.warnText = '组合名请勿为空';
            self.flag = true;
            return false;
          }

          // var reg = /^[\u4E00-\u9FA5]+$/; //验证组合名是否全是中文
          var reg = /^[A-Za-z0-9\u4e00-\u9fa5]+$/; //验证组合名是否是中文、字母或数字
          if (!reg.test(groupName)) {
            self.warnText = '组合名只能含中文、字母或数字';
            self.$store.dispatch('setTip', {text: "组合名只能含中文、字母或数字"});
            self.flag = true;
            return false;
          }

          if (groupName.length > 10) {
            self.warnText = '名称请勿超过10个汉字';
            self.$store.dispatch('setTip', {text: "名称请勿超过10个汉字"});
            self.flag = true;
            return false;
          }
          RemoteDAO.callJCL11148(userCode, groupId, groupName, function (response) {
            self.flag = true;
            if (Number(response.error) === 0) {
              if (_.isFunction(self.modal.callback)) {
                self.modal.callback({error:0,name:groupName});
              }
              self.groupName = '';
              self.$store.dispatch('setModal', {visible: true, modalId: 'groupSetNameSuccModal'});
            } else {
              self.$store.dispatch('setTip', {text: response.data});
            }

          });
        }
      },
      modalHide(){
        this.groupName = '';
        this.$store.dispatch('setModal', {visible: false, modalId: ''});
      }
    }
  }
</script>

<style scoped>
  .slide-fade-enter-active,.slide-fade-leave-active{
    transition: all 0.3s ease;
  }
  .slide-fade-enter, .slide-fade-leave-active {
    transform: translate(0,-25%);
    opacity: 0;
  }
</style>
